<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  --unregistered-a: 100;
  --unregistered-b: 200;
}
</style>
<div id="target"></div>
<script>
setup(() => {
  CSS.registerProperty({
    name: '--test',
    syntax: '<number>',
    initialValue: '0',
    inherits: false,
  });
});

test(() => {
  let animation = target.animate({'--test': ['var(--unregistered-a)', 'var(--unregistered-b)']}, 100);

  animation.currentTime = 25;
  assert_equals(getComputedStyle(target).getPropertyValue('--test'), '125', 'target at 25%');

  animation.currentTime = 75;
  assert_equals(getComputedStyle(target).getPropertyValue('--test'), '175', 'target at 75%');
}, 'Registered custom property animation keyframes with var() references to unregistered custom properties');
</script>
